<template>
  <div class="mapC">
    <div class="drawing-panel">
      <!-- <div
        id="marker"
      >
        <el-button @click="draw('marker')" type="primary" size="mini">标点</el-button>
      </div>
      <div
        id="polyline"
      >
        <el-button @click="draw('polyline')" type="primary" size="mini">线路</el-button>
      </div> -->
      <div
          id="circle"
      >
        <el-button @click="draw('circle')" type="primary" size="mini">
          <ali-icon icon="iconyuanxingweixuanzhong"></ali-icon>
          圆形
        </el-button>
      </div>
      <div
          id="rectangle"
      >
        <el-button @click="draw('rectangle')" type="primary" size="mini">
          <ali-icon icon="iconjuxing" style="color: #FFFFFF"></ali-icon>
          矩形
        </el-button>
      </div>
      <div
          id="polygon"
      >
        <el-button @click="draw('polygon')" type="primary" size="mini">
          <ali-icon icon="iconicon-dianjiduobianxing"></ali-icon>
          多边形
        </el-button>
      </div>
      <div>
        <el-button-group>
          <el-button @click="setLayers('wx')" size="mini">
            <ali-icon icon="iconweixing"></ali-icon>
            卫星
          </el-button>
          <el-button @click="setLayers('jd')" size="mini">
            <ali-icon icon="iconjiedao"></ali-icon>
            街道
          </el-button>
          <el-button @click="clearItem" size="mini">
            <ali-icon icon="iconqingchuhuancun"></ali-icon>
            清除
          </el-button>
        </el-button-group>
      </div>
    </div>
    <div id="map"></div>
    <div class="bottom-right">
      <div class="item">
        <div class="block">
          <span class="demonstration">半径:</span>
          <el-slider v-model="radius" :step="1" style="width: 100%"></el-slider>
        </div>
      </div>
      <div class="item">
        <div class="block">
          <span class="demonstration">max:</span>
          <el-slider v-model="max" :step="1" style="width: 100%"></el-slider>
        </div>
      </div>
      <div class="item">
        <el-button type="primary" size="mini">
          显示热力图
        </el-button>
        <el-button type="primary" size="mini">
          隐藏热力图
        </el-button>
        <el-button type="primary" size="mini">
          清除热力图
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    city(val) {
      console.log(val);
      //this.setCenter(val);
    },
    markers(val) {
      console.log("markers", val);
      // this.setMarkers();
    },
    center(val) {
      console.log("center", val);
      this.setCenter();
    },
  },
  props: {
    city: {
      type: String,
      default() {
        return "";
      },
    },
    markers: {
      type: Array,
      default() {
        return [];
      },
    },
    center: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      map: null,
      drawingManager: null,
      mapLoading: true,
      bmap_marker: true,
      mouseTool: null,
      overlays: [],
      circle: [],
      polygon: [],
      layers: [],
      address:'',
      geoObj: null,
      radius: 50,
      max: 80
    };
  },
  mounted() {
    this.initMap();


  },

  methods: {
    setCenter() {
      this.map.centerAndZoom(
          new BMapGL.Point(this.center[0], this.center[1]),
          11
      );
    },
    setAddress() {
      let myGeo = new BMapGL.Geocoder();
       console.log(this.address)
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(this.address, point => {
        if (point) {
          this.map.clearOverlays()
          this.map.centerAndZoom(point, 16);
          this.map.addOverlay(new BMapGL.Marker(point, {title: this.address}))
        } else {
          alert('您选择的地址没有解析到结果！');
        }
      }, '')
    },
    search() {
      return {circle: this.circle, polygon: this.polygon};
    },
    draw(e) {
      let drawingManager = this.drawingManager;
      switch (e) {
        case "marker": {
          var drawingType = BMAP_DRAWING_MARKER;
          break;
        }
        case "polyline": {
          var drawingType = BMAP_DRAWING_POLYLINE;
          break;
        }
        case "rectangle": {
          var drawingType = BMAP_DRAWING_RECTANGLE;
          break;
        }
        case "polygon": {
          var drawingType = BMAP_DRAWING_POLYGON;
          break;
        }
        case "circle": {
          var drawingType = BMAP_DRAWING_CIRCLE;
          break;
        }
      }
      //console.log('3132',drawingManager)
      // 进行绘制
      if (
          drawingManager._isOpen &&
          drawingManager.getDrawingMode() === drawingType
      ) {
        drawingManager.close();
      } else {
        //     console.log('draw',drawingManager)
        drawingManager.setDrawingMode(drawingType);
        drawingManager.open();
      }
    },
    setMark(mark) {
      console.log(mark);
      let markers = [];
      for (let i = 0; i < mark.length; i++) {
        let point = new BMapGL.Point(mark[i]["longitude"], mark[i]["latitude"]);
        this.map.addOverlay(new BMapGL.Marker(point));
      }
    },
    clearMark() {
      this.map.clearOverlays();
    },
    addOverlay(map) {
      console.log('绘制圆形', map);
      this.circle = map.circle === undefined ? [] : map.circle;
      this.polygon = map.polygon === undefined ? [] : map.polygon;
      console.log('polygon',this.polygon)
      this.circle.forEach((item) => {

        let circle = new BMapGL.Circle(
            new BMapGL.Point(item.lng, item.lat),
            item.radius,
            {
              strokeColor: "blue",
              strokeWeight: 2,
              strokeOpacity: 0.5,
            }
        );
        this.map.centerAndZoom(
            new BMapGL.Point(item.lng,item.lat ),
            11
        );
        this.map.addOverlay(circle);
      });

      this.polygon.forEach((item) => {
        let point = []
        console.log('item',item)
        item.forEach((item1)=>{
          console.log('item1',item1)
          if (item1.latLng!=undefined){
            point.push( new BMapGL.Point(item1.latLng.lng, item1.latLng.lat))
          }
        })
        let polygon = new BMapGL.Polygon(
            point,
            {
              strokeColor: "blue",
              strokeWeight: 2,
              strokeOpacity: 0.5,
            }
        );
        this.map.addOverlay(polygon);
      });
    },
    initMap() {
      let _that = this;
      this.map = new BMapGL.Map("map", {enableMapClick: false}); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
      this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true);
      let styleOptions = {
        strokeColor: "#5E87DB", // 边线颜色
        fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
        strokeWeight: 2, // 边线宽度，以像素为单位
        strokeOpacity: 1, // 边线透明度，取值范围0-1
        fillOpacity: 0.2, // 填充透明度，取值范围0-1
      };
      let labelOptions = {
        borderRadius: "2px",
        background: "#FFFBCC",
        border: "1px solid #E1E1E1",
        color: "#703A04",
        fontSize: "12px",
        letterSpacing: "0",
        padding: "5px",
      };

      // 实例化鼠标绘制工具
      this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
        // isOpen: true,        // 是否开启绘制模式
        enableCalculate: false, // 绘制是否进行测距测面
        enableSorption: true, // 是否开启边界吸附功能
        sorptiondistance: 20, // 边界吸附距离
        circleOptions: styleOptions, // 圆的样式
        polylineOptions: styleOptions, // 线的样式
        polygonOptions: styleOptions, // 多边形的样式
        rectangleOptions: styleOptions, // 矩形的样式
        labelOptions: labelOptions, // label样式
      });
      this.drawingManager.addEventListener("circlecomplete", (e, overlay) => {
        console.log("circlecomplete.lat", overlay.latLng.lat);
        console.log("circlecomplete.lng", overlay.latLng.lng);
        console.log("circlecomplete.radius", overlay.radius);
        this.circle.push({
          lat: overlay.latLng.lat,
          lng: overlay.latLng.lng,
          radius: overlay.radius,
        });
      });
      this.drawingManager.addEventListener("polygoncomplete", (e, overlay) => {
        console.log("polygoncomplete", overlay.points);
        console.log("polygon", this.polygon);
        this.polygon.push(overlay.points);
      });
      this.drawingManager.addEventListener("polylinecomplete", (e, overlay) => {
        console.log("polylinecomplete", overlay);
      });
      this.drawingManager.addEventListener(
          "rectanglecomplete",
          (e, overlay) => {
            console.log("rectanglecomplete", overlay);
            console.log("polygon", this.polygon);
            this.polygon.push(overlay.points);
          }
      );

      /*  */
    },

    initAutocomplete(element) {
      let ac = new BMapGL.Autocomplete({
        //建立一个自动完成的对象
        input: element.$el.querySelector('input'),
        location: this.map,
        onSearchComplete: (e) => {
          console.log('完成complete', e);
          this.address=e.keyword
        },
      });
      ac.addEventListener("onhighlight", function (e) {
        // console.log('search',e)
        let _value = e.fromitem.value;
        let value = "";
        console.log('search', _value);
      })
      ac.addEventListener("onconfirm", (e)=> {
        let _value = e.item.value;
        let myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        console.log('onconfirm', myValue);
        this.address=myValue
      //  this.setAddress(myValue)
      });
    },

    clearItem() {
      console.log('清除')
    },
    setLayers(type) {
      let layers = [];
      if (type == "wx") {
        //地球模式
        this.map.setMapType(BMAP_EARTH_MAP);
      }
      if (type == "jd") {
        //街道模式
        console.log(type)
      }
    }
  },
};
</script>
<style>
.tangram-suggestion-main {
  z-index: 999999;
}
</style>
<style lang="scss" scoped>


.mapC {
  width: 100%;
  height: 600px;
  position: relative;

  #map {
    width: 100%;
    height: 100%;
  }

  .tools {
    position: absolute;
    top: 20px;
    right: 10px;
  }
}

ul li {
  list-style: none;
}

.info {
  z-index: 999;
  width: auto;
  min-width: 22rem;
  padding: 0.75rem 1.25rem;
  margin-left: 1.25rem;
  position: fixed;
  top: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  font-size: 14px;
  color: #666;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}

.drawing-panel {
  z-index: 999;
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 0;
  border-radius: 0.25rem;
  display: flex;
}

.bmap-btn {
  border-right: 1px solid #d2d2d2;
  float: left;
  width: 64px;
  height: 100%;
  background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
  cursor: pointer;
}

.bottom-right {
  z-index: 999;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  padding-left: 0;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;

  .item {
    .block {
      display: flex;
      flex-direction: row;

      .demonstration {
        width: 50px;
        font-weight: bold;
        color: #000000;
        line-height: 36px;
        height: 36px;
      }
    }
  }
}
</style>
